<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">


    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/index.css">
    <!--<link rel="stylesheet" href="lib/bootstrap.min.css">-->
    <link rel="stylesheet" href="lib/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="lib/swiper/swiper-3.4.2.min.css">
    <!--<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>-->
    <!--<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
</head>
<body >
<div class="my-content" id="my-content" >
    <div class="swiper-container">
        <div class="swiper-wrapper"  v-for="item in imgList">
            <div class="swiper-slide" >
                <img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="" >
            </div>
            <div class="swiper-slide">
                <<img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">
            </div>



        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination">

        </div>
    </div>


    <section id="content" class="content">
        <!--<p>{{ message }}</p>-->

        <div class="weui-cells_title">
            <!--<p>最新</p>-->

        </div>

        <div class="cells">

            <ul id="goodslist">

                <li v-for="(item,index) in goods"  class="good_cell" v-on:click="getDetail(index)">


                        <div class="cell_detail">
                            <div class="cell_img">
                                <img :src="item.thumb" class="img_detail">
                            </div>
                            <div class="cell_label">
                                <p>{{item.goods_name}}</p>
                                <p>[{{item.des}}]</p>
                            </div>
                            <div class="cell_price">¥ {{item.goods_price}}</div>
                        </div>


                </li>



            </ul>



        </div>

    </section>

</div>

<div class="my-tab">
    <div class="my-tabbar">
        <a href="" class="tabbar-item active">
            <span></span>
            <div class="item-icon">
                <img src="images/index_press.png" alt="">
            </div>
            <p class="item-label">首页</p>
        </a>
        <a href="" class="tabbar-item">
            <span></span>
            <div class="item-icon">
                <img src="images/order.png" alt="">
            </div>
            <p class="item-label">订单</p>
        </a>
        <a href="" class="tabbar-item">
            <span></span>
            <div class="item-icon">
                <img src="images/me.png" alt="">
            </div>
            <p class="item-label">我</p>
        </a>
    </div>

</div>


<script src="js/axios.js"></script>
<script src="lib/vue.js"></script>
<script src="lib/bootstrap.mini.js"></script>
<script type='text/javascript' src='lib/jquery-2.1.4.js'></script>
<script type='text/javascript' src='lib/swiper/swiper-3.4.2.jquery.min.js'></script>
<script type='text/javascript' src='lib/jquery.params.js'></script>
<script>
    window.onload = function () {
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: 3000,//可选选项，自动滑动
//            loop: true,

            // 如果需要分页器
            pagination: '.swiper-pagination',


        });
        //除去tabbar高度
        var screenHeight = document.documentElement.clientHeight - 64;
        $("#my-content").css('height',screenHeight);
        //除去header高度
        var cellheight = screenHeight - 200;
        $('.content').css('height',cellheight);


//        var subvue = new Vue({
//            el:"#"
//        })

    }

</script>
</script>
<script >



        var app = new Vue({
            el: '#my-content',
            data: {
                message: "xuxiao is boy",
                goods: [],
                imgList: [],
            },
            beforeCreate: function () {


            },
            created: function () {
                //            //获取首页图

                axios.get('http://shop.vsharp.top/api/Carousel/getList')
                        .then(function (response) {

                            for (var i = 0; i < response.data.length; i++) {


                                app.imgList.push(response.data[i]);

                            }
                            console.log(app.imgList);

                        }).catch(function (error) {

                });

                //获取首页数据
                axios.get("http://shop.vsharp.top/api/Goods/getGoodsOnIndex")
                        .then(function (response) {

                            app.goods = response.data;

                            console.log(response.data);


                        }).catch(function (error) {

                });


            },
            methods: {
                //点击跳转详情
                getDetail:function (res) {

                    url = "view/detail.html?goodsid=" + this.goods[res].id;
//                    alert(url);
                    window.location.href = url;

                }

            },
            beforeMount: function () {
                console.group('beforeMount 挂载前状态===============》');
                console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            mounted: function () {
                console.group('mounted 挂载结束状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 更新前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            updated: function () {
                console.group('updated 更新完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message)
            }
        });
//    };
















</script>

</body>
</html>